<template>
    <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">MJ绘画配置</div>
            <el-form-item label="功能开启" prop="status">
                <div>
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips !text-[14px] flex items-center">
                        功能关闭后，用户将无法访问该功能
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="应用名称" prop="name">
                <div>
                    <div class="flex">
                        <el-input
                            placeholder="请输入应用名称"
                            class="w-[400px]"
                            v-model="formData.name"
                        />
                    </div>
                    <div class="form-tips !text-[14px]">
                        不填写前台则显示默认名称(MJ绘画)
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="接口渠道" prop="channel" required>
                <div>
                    <div class="flex">
                        <el-radio-group v-model="formData.channel">
                            <el-radio value="zsy">知数云</el-radio>
                            <el-radio value="acedata">AceData</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="form-tips !text-[14px]">
                        开通地址：
                        <a
                            class="text-primary"
                            target="_blank"
                            :href="website[formData.channel]"
                        >
                            前往开通
                        </a>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="生成模式" prop="channel" required>
                <div>
                    <div class="flex items-center gap-4 mb-1">
                        <el-checkbox v-model="formData.mode.relax.status" label="慢速" size="large" />
                        <el-input-number v-model="formData.mode.relax.points" :min="0" style="height: 30px" />
                    </div>
                    <div class="flex items-center gap-4 mb-1">
                        <el-checkbox v-model="formData.mode.fast.status" label="快速" size="large" />
                        <el-input-number v-model="formData.mode.fast.points" :min="0" style="height: 30px" />
                    </div>
                    <div class="flex items-center gap-4">
                        <el-checkbox v-model="formData.mode.turbo.status" label="极速" size="large" />
                        <el-input-number v-model="formData.mode.turbo.points" :min="0" style="height: 30px" />
                    </div>
                    <div class="form-tips text-xs">
                        至少勾选1个模式，并设置单次消耗积分, 不同模式计费不同。
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['draws:setting:mj_save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import drawsSettingApi from '@/api/apply/draws/setting'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    channel: 'mj_zsy',
    status: 0,
    name: '',
    mode: {
        fast: {status: true, points: 0},
        relax: {status: true, points: 0},
        turbo: {status: true, points: 0}
    }
})

// 表单验证
const rules = {
    'channel': [
        { required: true, message: '请正确选择接口渠道', trigger: ['blur'] }
    ]
}

// 开通地址
const website: any = {
    'zsy': 'https://data.zhishuyun.com?inviter_id=1bb484e7-c890-4c9d-8097-9cbd9a4f7b2f',
    'acedata': 'https://share.acedata.cloud/1uKiavfTgM'
}

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await drawsSettingApi.mj_detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await drawsSettingApi.mj_save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
